<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.bg-info {
				background-color: #d9edf7;
			}
			
			.btn-lg {
				padding: 10px 16px;
				font-size: 18px;
				line-height: 1.3333333;
				border-radius: 6px;
			}
			
			.bg-danger {
				background-color: #f2dede;
			}
			
			.text-center {
				text-align: center;
			}
			
			#main {
				width: 200px;
				height: 100px;
			}
			
			.testMain {
				width: 300px;
				height: 300px;
			}
			
			.testBule {
				background-color: #D9EDF7;
			}
		</style>
		<script type="text/javascript" src="js/MyJQuery2.0.js"></script>
		<script>
			$(document).ready(function() {
				/*$("p").click(function() {
					//$(this).css('color','#00FF00');//考虑了很久，决定不用这种字符串形式，只用对象。
					//$(this).css({'color':'#00FF00',"font-size":"16px"});
					//$(this).addClass("testMain", "testBule");
					$(this).html("1234");
					
				});*/
				$.ajax({
					type: "GET",
					url: "./js/community.json",
					dataType: "json",
					data: null,
					beforeSend: function() {
						//some js code
					},
					success: function(msg) {
						console.log(msg)
					},
					error: function() {
						console.log("error")
					}
				});
				
				//$("p").html("1234");
				/*$("#main").onmouseover(function () {
				    console.log('正在执行移入');
				}).onmouseout(function(){
					console.log('正在执行移出');
				}).onclick(function(){
					console.log('正在执行点击');
				}).ondblclick(function(){
					console.log('正在执行鼠标双击事件');
				}).onmouseup(function(){
					console.log('正在执行鼠标释放');
				});*/
			})
			
		</script>
	</head>
	<body id="body" class="body">
		<button class="btn-lg" onclick="test()">测试</button>
		<div id="main" class="bg-info">
			<p class="text-center bg-danger" id="testP1">测试的文字</p>
			<p class="text-center bg-danger">测试的文字2</p>
		</div>
		<div class="bg-info">
			<p class="text-center bg-danger">测试的文字</p>
			<p class="text-center bg-danger">测试的文字2</p>
		</div>

		<!--<script type="text/javascript" src="js/jquery2.1.1.js"></script>-->
		<script>
				
			function test() {
				$("#main").animate({width:500,height:500},10, 0.01,function(){
					console.log("回调函数成功");
				});
				//$('#main').toggleClass('testMain', 'testMain');//成功
				//$('#main').css('color','#00FF00');
				//$('#main').addClass('testMain','testMain');

				//$('#main').html('1234');
				//$('p').parents();
				//$('p').hide();

				//$('#main').children(0);
				//$('#main').parent().css('color','#00FF00','text-align','center');
				//$('#main').html('1234');
				//$('#main').text('1');
				//$('#main').append('<h1>啊哈</h1>');
				//$('#main').children(1).css('color','#00FF00','text-align','center');
				/*ajax:function(){
					url: 'www.baidu.com/getInfo',
					type :'POST',
					data: {
						name: 'jack',
						age: 18
					},
					dataType: 'json',
					success: function(resp){
					// callback
					},
					error: function(err){
					// error code
					} 
				},*/
				//$('#main').get('https://www.runoob.com/try/ajax/ajax_info.txt');
				//$('#main').append('<h1>aaa</h1>');
				//$('#main').prepend('<h1>aaa</h1>');
				//$('#main').html();
				//$('#main').hide();//切换为显示完成
				//$('#main').height();//获取高度成功
				//$('#main').width();//获取宽度成功
			
			}
		</script>
	</body>

</html>